<template>
    <div style="padding: 15px;box-sizing: border-box;">
        <div class="divbox">
            <el-button type="primary">全部订单<span>(1000)</span></el-button>
            <el-button>待付款<span>(1000)</span></el-button>
            <el-button>待发货<span>(1000)</span></el-button>
            <el-button>已发货<span>(1000)</span></el-button>
            <el-button>已完成<span>(1000)</span></el-button>
            <el-button>已关闭<span>(1000)</span></el-button>
        </div>

        <div class="demo-date-picker" style="margin-top: 15px;display: inline-block;">
            <div class="block">
                <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" :size="size" placement="top-start" />
            </div>
        </div>
        <div class="mt-4" style="width: 400px;display: inline-block;margin-left: 10px;vertical-align: 2px;">
            <el-input v-model="input3" placeholder="Please input" class="input-with-select">
                <template #prepend>
                    <el-select v-model="select" placeholder="订单编号" style="width: 115px">
                        <el-option label="订单编号" value="订单编号" />
                        <el-option label="收货人姓名" value="收货人姓名" />
                        <el-option label="收货人电话" value="收货人电话" />
                        <el-option label="商品货号" value="商品货号" />
                    </el-select>
                </template>
            </el-input>
        </div>
        <el-button type="primary" style="width: 50px;margin-left: 10px;vertical-align: 2px;">查询</el-button>

        <el-table ref="multipleTableRef" :data="tableData" style="width: 100%;margin-top: 10px;">
            <el-table-column prop="bianhao" label="订单编号" />
            <el-table-column prop="time" label="提交时间" />
            <el-table-column prop="money" label="订单金额" />
            <el-table-column prop="username" label="用户信息" />
            <el-table-column prop="PaymentMethod" label="支付方式" />
            <el-table-column prop="Status" label="订单状态" />
            <el-table-column fixed="right" label="操作">
                <template #default="{ row }">
                    <el-button link type="primary" size="small" @click="add(row)">查看订单</el-button>
                    <el-button link type="primary" size="small" @click="del(row)">关闭订单</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[2,4,6]"
         :small="small" :disabled="disabled" background="true" layout="total, sizes, prev, pager, next, jumper"
         :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"
         style="margin-top: 5%;margin-bottom: 1rem;text-align: center;" />
    </div>
</template>

<script setup lang="ts">
const size = ref<'default' | 'large' | 'small'>('default')
const value1 = ref('')
const input3 = ref('')
const select = ref('')
let currentPage4 = ref(1)
let pageSize4 = ref(6)
let total = ref(20)
let small = ref(false)
let disabled = ref(false)
const tableData = reactive([
    {
        bianhao: '123452677',
        time: '2023-7-7',
        money: '300',
        username: '张三/13566998864',
        PaymentMethod: '微信支付',
        Status: '已发货',
    }
])

const handleSizeChange = (val: number) => {
   console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
   console.log(`current page: ${val}`)
}
//查看订单
const add = (row: any) => {
    console.log(row);

}
//关闭订单
const del = (row: any) => {
    console.log(row);

}
</script>

<style>
/* .el-popper {
    margin-left: 140px;
} */
.input-with-select .el-input-group__prepend {
    background-color: var(--el-fill-color-blank);
}

</style>